{extend name="$admin_layout" /}
{block name="content"}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/statistics/css/bill.css">
    <!-- element -->
    <link rel="stylesheet" href="/static/plugins/element-ui/element-ui.css">
    <!-- vue -->
    <script src="/static/plugins/vue/vue.min.js"></script>
    <!-- 引入组件库 element -->
    <script src="/static/plugins/element-ui/element-ui.js"></script>
    <!-- jquery -->
    <script src="/static/admin/js/crm/jquery.min-2.1.4.js"></script>
    <script src="__PLUG__/jqueryToast/js/toast.js"></script>
    <script src="__ADMIN_JS__/stars.js"></script>
</head>

<body>
<div id="el">
    <!-- 查询条件 -->
    <el-form :inline="true" class="">
        <el-form-item label="支付方式">
            <!-- multiple    collapse-tags  -->
          <el-select v-model="searchForm.payType"   clearable placeholder="支付方式"> 
            <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
            <el-date-picker 
                v-model="timeRange" 
                type="daterange" 
                :picker-options="pickerOptions"
                value-format='yyyy-MM-dd' 
                range-separator="至" 
                start-placeholder="{:lang('开始日期')}"
                end-placeholder="{:lang('结束日期')}" 
                align="right" 
                @change='getDateTimerange'>
           </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small"   @click="getNewTable" type="primary" >查询</el-button>
        </el-form-item>
        <el-form-item>
           <el-button size="small" @click="resetData" type="warning" >重置</el-button>
        </el-form-item>
    </el-form>
    <div style="margin-bottom: 10px;">
    <!-- <el-card> -->
          <el-row :gutter="20"  v-for="item in allDetail" style="margin-bottom: 5px;font-size: 14px;">
            <el-col :span="3">{{item.name}}</el-col>
            <el-col :span="3">收款：{{item.income}}</el-col>
            <el-col :span="3">已核算：{{item.check}}</el-col>
            <el-col :span="15"></el-col>
          </el-row>
    <!-- </el-card> -->
    </div>
    <el-table   :data="tableData"  border   style="width: 100%">
        <el-table-column   header-align="center" align="center"  prop="create_time"  label="日期"    width="150"></el-table-column>
        <el-table-column  header-align="center" align="center"  prop="num"  label="订单数"  width="100"> 
            <template slot-scope="scope">
               
                <el-link  type="danger" :href="'/admin.php/statistics/finance/reconciliationcenter.html?startTime='+scope.row.create_time +'&payType='+searchForm.payType" > {{scope.row.num}}</el-link>
            </template>
        </el-table-column>
        <el-table-column header-align="center"  width="120" align="center"  prop="order_money"  label="订单总额">  </el-table-column>
        <el-table-column  header-align="center" width="120"  align="center"  prop="payable_money"  label="实收总额">  </el-table-column>
        <el-table-column  header-align="center" width="100" align="center"  prop="state"  label="核对状态">
            <template slot-scope="scope">
                <span  v-if="scope.row.state == 1"   style="color:#409EFF;"> 已核对 </span>
                <span  v-if="scope.row.state == 2"   style="color:#F56C6C;">核对异常</span>
                <span  v-if="scope.row.state == 0"   style="color:#E6A23C;">未核对</span>
            </template>
        </el-table-column>
        <el-table-column  header-align="center" align="center"  prop="state"  label="支付统计">  
            <template slot-scope="scope" >
                <div v-if="scope.row.info.length>0">
                    <span v-for="item in  scope.row.info"> <span style="padding-right:5px">{{item.name}}</span> 收款:{{item.income}} 核算：{{item.check}}  </span>   
                </div>
                <span v-else >无支付内容</span>
            </template>
        </el-table-column>
        <!-- <el-table-column  header-align="center" align="center"  prop="state"  label="操作">  
            <template slot-scope="scope" >
                <el-button size="small"  @click="handleCheck"  v-if="scope.row.state== 0 " type="primary" >核对</el-button>
                <el-button size="small"  @click="handleCheck"  v-if="scope.row.state== 2" type="warning" >重新核对</el-button>
            </template>
        </el-table-column> -->
    </el-table>

    <div style="margin-top: 10px;text-align: right;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageObj.page" :page-sizes="[10, 20, 30, 50,100]" :page-size="pageObj.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total">
        </el-pagination>
    </div>
</div>


</body>
<script>
    new Vue({
        el: '#el',
        data() {
            return {
                payWay:'',//支付方式

                timeRange: '',
                searchForm: {
                    startTime: '',
                    endTime: '',
                    payType: '',
                },
                pageObj: {
                    page: 1,
                    total: 0,
                    limit: 10
                },
                allDetail:{

                },
                tableData: [],
                options: [{
                    value: 'wxpay',
                    label: "{:lang('微信')}"
                }, {
                    value: 'alipay',
                    label: "{:lang('支付宝')}"
                }, {
                    value: 'appleiap',
                    label: "{:lang('苹果内购')}"
                }, {
                    value: 'balance',
                    label: "{:lang('余额支付')}"
                },{
                    value: 'minipay',
                    label: "{:lang('微信小程序支付')}"
                }],
                pickerOptions: {
                    shortcuts: [{
                        text: "{:lang('最近一天')}",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: "{:lang('最近一周')}",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: "{:lang('最近一个月')}",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: "{:lang('最近三个月')}",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        mounted(options) {
            console.log(options,8888)
             // 数据渲染
            //  let response = JSON.parse(document.getElementById('getCheckCenterData').value)
            // console.log(response)
            // this.tableData = response.result.data
            // this.pageObj.total = response.result.total
            this.getTable()
        },
        onload(options){
            console.log(options,8888)

        },
        methods: {
            handleCheck(){
                const that  =  this
                this.$confirm( '你确定要重新核算该内容吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {


                    $.ajax({
                        url: "getCheckCenterData",
                        type: "post",
                        data: formData,
                        success: (res) => {
                            that.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            that.getTable()
                        }
                    });
                  
                }).catch(async () => {
                })
            },
            Exp(){
                document.getElementById("myForm").submit()
            },
            getNewTable(){
                this.pageObj.limit =10
                this.pageObj.page =0
                this.getTable()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageObj.limit =val
                this.getTable()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageObj.page =val
                this.getTable()
            },
            resetData() {
                this.searchForm.startTime = ''
                this.searchForm.endTime = ''
                this.searchForm.payType = ''
                this.timeRange = ''
            },
            getDateTimerange() {
                console.log('选择时间',this.timeRange)
                if (this.timeRange) {
                    this.searchForm.startTime = this.timeRange[0]
                    this.searchForm.endTime = this.timeRange[1]
                } else {
                    this.searchForm.startTime = ''
                    this.searchForm.endTime = ''
                }
            },
            getTable() {
                const that = this
                this.searchForm.page =this.pageObj.page
                this.searchForm.list_rows =this.pageObj.limit
                console.log(this.searchForm)
                var formData = this.searchForm
                Stars.loading();
                $.ajax({
                    url: "/admin.php/statistics/finance/bill.html",
                    type: "post",
                    data: formData,
                    success: (res) => {
                        console.log(res,8888)
                        // var data = JSON.parse(res)
                  
                        // console.log(data)
                        this.tableData = res.data.list.data
                        this.allDetail = res.data.data
                        this.pageObj.total = res.data.list.total
                        // toast提醒
                        // Stars.notify('哈哈哈哈','danger');
                        Stars.loading('hide');

                        // that.$message({
                        //     message: '操作成功',
                        //     type: 'success'
                        // });

                    },error:(res) => {
                        Stars.loading('hide');
                        // that.$message({
                        //     message: '操作失败，请联系后台管理员',
                        //     type: 'error'
                        // });
                  

                    }
                });
            }
        },
    })
</script>


</html>
{/block}